<template>
	<view class="order-options">
		<view class="option-item">
			<view class="label">
				商品合计
			</view>
			<view class="value" style="color: #333333;">
				￥{{totalPrice}}
			</view>
		</view>
		<view class="option-item">
			<view class="label">
				支付方式
			</view>
			<view class="value" @click="selectPayWay">
			<image class="icon" :src="currentPayOption.icon"/>{{currentPayOption.name}} <i class="iconfont icon-arrow-right" />
			</view>
		</view>
		<view class="option-item">
			<view class="label">
				配送方式
			</view>
			<view class="value" @click="selectDeliver">
				{{currentDeliverOption.name}} <i class="iconfont icon-arrow-right" />
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps,defineEmits, computed } from 'vue';
	import type { IPayOption,IDeliverOption } from '@/global';
	import global from '@/global';
	import { PAY_WAY_TYPE } from '@/enum/pay';
	import { DELIVER_TYPE } from '@/enum/deliver';

	interface IProps {
		totalPrice : number,
		currentPayOption:IPayOption,
		currentDeliverOption:IDeliverOption,
	}

	const props = withDefaults(defineProps<IProps>(), {
		totalPrice: 0,
	})
	
	const emit = defineEmits(['updateCurrentPayOption','updateCurrentDeliverOption'])

	const sheelNameList = computed(() => {
		const list : string[] = [];
		for (let key in global.payOptionList) {
			list.push(global.payOptionList[key].name);
		}
		return list
	})
	
	const deliverNameList =  computed(() => {
		const list : string[] = [];
		for (let key in global.deliverOptionList) {
			list.push(global.deliverOptionList[key].name);
		}
		return list
	})

	const selectPayWay = () => {
		uni.showActionSheet({
			itemList: sheelNameList.value,
			success: (res) => {
				const current : IPayOption = global.payOptionList[(Object.values(global.payOptionList).find((item : IPayOption) => item.name === sheelNameList.value[res.tapIndex])).type];
				emit('updateCurrentPayOption',current);
			},
		});
	}
	
	const selectDeliver = ()=>{
		uni.showActionSheet({
			itemList: deliverNameList.value,
			success: (res) => {
				const current : IDeliverOption = global.deliverOptionList[(Object.values(global.deliverOptionList).find((item : IDeliverOption) => item.name === deliverNameList.value[res.tapIndex])).type];
				emit('updateCurrentDeliverOption',current);
			},
		});
	}
</script>

<style scoped lang="scss">
	@import "./orderOptions.scss";
</style>